<template>
  <div>
    <el-dialog :title="title" :close-on-click-modal="false" v-dialogDrag :visible.sync="editVisible">
      <el-form v-loading="loading" label-width="105px" ref="editForm" :model="editForm">

        <!--el-form-item label="租户名称:" prop="fullName" :rules="[
                              {required: false, message:'请输入租户名称', trigger:['change','blur']}
                             ]">
          <el-autocomplete placeholder="请输入内容" size="small" @blur.stop="saveLocal($event.target.value,'userName')"
            :debounce="0" :fetch-suggestions="querySearch" @select="handleSelect($event,'1')" :trigger-on-focus="false"
            v-model="editForm.fullName">
            <template slot-scope="{ item }">

              <section class="querySearch-autocomplete">
                <section class="name-item">
                  <section class="name"><span v-if="item.value">{{ item.value.substr(0,1) }}</span></section>
                  {{ item.value}}
                </section>
                <section>
                </section>
              </section>
              <div></div>
            </template>
          </el-autocomplete>
        </el-form-item-->
        <el-form-item label="预警类型:" prop="warnType" :rules="[
                              {required: true, message:'请输入预警类型', trigger:'blur'}
                             ]">
          <el-select clearable v-model="editForm.warnType">
            <el-option label="---请选择---" :value="0"></el-option>
            <el-option
              v-for="item in  $dictUtils.getDictList('warnType')"
              :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="预警名称:" prop="warnName" :rules="[
                              {required: true, message:'请输入预警名称', trigger:'blur'}
                             ]">
          <el-input v-model="editForm.warnName"></el-input>
        </el-form-item>
        <el-form-item label="识别条件" prop="preConf" :rules="[
                              {required: true, message:'请输入识别条件', trigger:'blur'}
                             ]">
          <el-input type="textarea" :rows="3"  v-model="editForm.preConf" placeholder="填写该预警的识别条件.例如预警类型'业务余量不足',预警名称'销售业务余量不足',识别条件'${processType}=1'"></el-input>
        </el-form-item>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <div class="footer-input">
          <el-button size="small" type="primary" @click="doSubmit()" v-noMoreClick>确定</el-button>
          <el-button size="small" @click="close()">取消</el-button>

        </div>

      </span>
    </el-dialog>
  </div>
</template>
<script>
  import {
    save,
    getById,
    getSearchlist
  } from '@/api/warn/WarnUser.js';
  export default {
    components: {},
    data() {
      return {
        loading: false,
        areaLabel: {},
        method: '',
        title: '',
        editForm: {
          id: '',
          warnType: '',
          warnName: '',
          preConf: '',
          fullName: '',
          tenantId: ''
        },
        editVisible: false,
        detailsVisible: false,
        tableData1: [],
        page: {
          pageSize: 10,
          pageNo: 1,
          total: 0
        },
        props: 1,
        dialogVisible: false,
        query: ''
      }
    },
    methods: {
      select(e) {
        this.editForm.companyName = e.names
        this.editForm.companyId = e.id
        this.dialogVisible = false
      },
      init(method, obj) {
        if (method === 'add') {
          this.editVisible = true
          this.editForm.id = ''
          this.editForm.warnType = ''
          this.editForm.warnName = ''
          this.editForm.preConf = ''
          this.editForm.fullName = ''
          this.editForm.tenantId = ''
          this.title = '新增'
          this.visible = true
          this.loading = false
        } else if (method === 'edit') {
          this.editVisible = true
          this.method = method
          this.title = '修改'
          this.$set(this.editForm, 'id', obj.id);
          this.$nextTick(() => {
            this.loading = true
            if (method === 'edit' || method === 'view') { // 修改或者查看
              getById({
                id: this.editForm.id
              }).then((res) => {
                if (res.data.code === '200') {
                  this.editForm = res.data.result
                  this.loading = false
                } else {
                  this.loading = false
                  this.visible = false
                  this.$message({
                    type: 'error',
                    message: res.data.message
                  })
                }
              })
            }
          })
          this.visible = true
          this.loading = false
        }

      },
      close() {
        this.editVisible = false
      },
      doSubmit() {
        this.$refs['editForm'].validate((valid) => {
          if (valid) {
            save(this.editForm).then((res) => {
              if (res.data.code === '200') {
                this.$message({
                  message: '编辑成功',
                  type: 'success'
                })
                this.editVisible = false
                this.$emit('refreshDataList')
              }
            })
          }
        })
      },
      //租户信息输入后匹配输入建议
      querySearch(queryString, cb){
        if (queryString) {
          getSearchlist({
            fullName:queryString,
            state:1
          }).then((res)=>{
            console.log(res)
            if (res.data.code==='200') {

                this.values=[]
              for (let index = 0; index < res.data.result.length; index++) {
                let element = {
                  value:'',
                  id:''
                }
               element.value=res.data.result[index].fullName
               element.id=res.data.result[index].id
               this.values.push(element) ;
              }
              cb(this.values)
            }
          })
        }
        // 调用 callback 返回建议列表的数据
      },
      handleSelect($event,item) {
        console.log($event);
        this.editForm.tenantId=$event.id
      },
      saveLocal(val, filed){
      },
    },
    mounted() {

    }
  }
</script>
<style lang="scss" scoped>
  ::v-deep .el-dialog {
    .el-form {
      .el-input__inner {
        width: 320px;
      }

      .inputAppend-wrapper {
        .el-input__inner {
          width: 282px;
        }
      }
    }
  }
</style>
